<template>
  <div class="profile-container">
    <el-row :gutter="20">
      <!-- 用户信息面板 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="6">
        <el-card class="profile-card">
          <div v-if="loading">
            <el-skeleton animated>
              <template #template>
                <div style="text-align: center;">
                  <el-skeleton-item variant="circle" style="width: 100px; height: 100px; margin: 0 auto;" />
                  <el-skeleton-item variant="h3" style="width: 60%; margin: 16px auto;" />
                  <el-skeleton-item variant="text" style="width: 50%; margin: 16px auto;" />
                </div>
              </template>
            </el-skeleton>
          </div>
          
          <div v-else class="user-info">
            <div class="avatar-container">
              <el-avatar :size="100" :src="user.avatarUrl ? getAvatarUrl(user.avatarUrl) : defaultAvatar" />
              <h2 class="username">{{ user.nickname }}</h2>
              <p class="user-id">@{{ user.username }}</p>
            </div>
            
            <div class="stats">
              <div class="stat-item">
                <strong>{{ user.articleCount || 0 }}</strong>
                <span>文章</span>
              </div>
              <div class="stat-item">
                <strong>{{ user.commentCount || 0 }}</strong>
                <span>评论</span>
              </div>
              <div class="stat-item">
                <strong>{{ user.likeCount || 0 }}</strong>
                <span>获赞</span>
              </div>
            </div>
            
            <div class="user-meta">
              <p v-if="user.email" class="meta-item">
                <el-icon><Message /></el-icon>
                <span>{{ user.email }}</span>
              </p>
              <p class="meta-item">
                <el-icon><Calendar /></el-icon>
                <span>加入时间：{{ formatDate(user.createTime) }}</span>
              </p>
            </div>
            
            <div class="actions">
              <template v-if="!isCurrentUser">
                <!-- 关注按钮 - 隐藏未实现功能 -->
                <!-- <el-button type="primary" :icon="Star" size="large" plain>关注</el-button> -->
                <!-- 发送私信按钮 -->
                <el-button type="success" :icon="Message" size="large" plain @click="showSendMessageDialog">发送私信</el-button>
              </template>
              <template v-else>
                <!-- 编辑资料按钮 -->
                <el-button type="primary" size="large" @click="$router.push('/settings')">编辑资料</el-button>
              </template>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 文章列表 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="18">
        <el-card class="article-card">
          <template #header>
            <div class="card-header">
              <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                <el-tab-pane label="发布的文章" name="articles" value="articles"></el-tab-pane>
                <el-tab-pane label="发表的评论" name="comments" value="comments"></el-tab-pane>
                <!-- 收藏功能暂未实现，先隐藏 -->
                <!-- <el-tab-pane label="收藏的文章" name="favorites" value="favorites" v-if="isCurrentUser"></el-tab-pane> -->
              </el-tabs>
            </div>
          </template>
          
          <!-- 加载中状态 -->
          <div v-if="contentLoading">
            <el-skeleton animated :count="5">
              <template #template>
                <div style="padding: 16px 0; border-bottom: 1px solid #EBEEF5;">
                  <div style="display: flex; align-items: start; justify-content: space-between;">
                    <div style="width: 100%;">
                      <el-skeleton-item variant="h3" style="width: 50%; margin-bottom: 16px;" />
                      <el-skeleton-item variant="text" style="width: 80%; margin-bottom: 8px;" />
                      <el-skeleton-item variant="text" style="width: 60%;" />
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
          
          <!-- 文章列表内容 -->
          <div v-else-if="activeTab === 'articles'">
            <div v-if="articles.length === 0" class="empty-list">
              <el-empty description="暂无文章"></el-empty>
            </div>
            <div v-else>
              <div v-for="article in articles" :key="article.id" class="article-item">
                <router-link :to="`/article/${article.id}`" class="article-title">
                  {{ article.title }}
                </router-link>
                <p class="article-summary">{{ article.summary || (article.content ? article.content.substring(0, 100) + '...' : '') }}</p>
                
                <!-- 添加标签显示 -->
                <div class="article-tags" v-if="article.tags">
                  <span class="tags-label">
                    <el-icon><CollectionTag /></el-icon>
                    标签:
                  </span>
                  <el-tag 
                    v-for="tag in getTags(article.tags).length ? getTags(article.tags) : ['默认']" 
                    :key="tag" 
                    size="small" 
                    :type="tag === '默认' ? 'info' : 'success'" 
                    effect="light" 
                    class="article-tag"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
                
                <div class="article-meta">
                  <span class="meta-item">
                    <el-icon><Calendar /></el-icon>
                    {{ formatDate(article.createTime) }}
                  </span>
                  <span class="meta-item">
                    <el-icon><ViewIcon /></el-icon>
                    {{ article.visitCount }} 浏览
                  </span>
                  <span class="meta-item">
                    <el-icon><ChatDotRound /></el-icon>
                    {{ article.replyCount }} 评论
                  </span>
                  <span class="meta-item">
                    <el-icon><Star /></el-icon>
                    {{ article.likeCount }} 点赞
                  </span>
                </div>
              </div>
              
              <!-- 分页 -->
              <div class="pagination">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="pageSize"
                  :current-page="currentPage"
                  @current-change="handlePageChange"
                />
              </div>
            </div>
          </div>
          
          <!-- 评论列表内容 -->
          <div v-else-if="activeTab === 'comments'">
            <div v-if="comments.length === 0" class="empty-list">
              <el-empty description="暂无评论"></el-empty>
            </div>
            <div v-else>
              <div v-for="comment in comments" :key="comment.id" class="comment-item">
                <div class="comment-content">
                  <p>{{ comment.content }}</p>
                </div>
                <div class="comment-footer">
                  <span class="article-link">
                    评论于文章：
                    <router-link :to="`/article/${comment.articleId}`">
                      {{ comment.articleTitle }}
                    </router-link>
                  </span>
                  <span class="comment-time">
                    {{ formatDate(comment.createTime) }}
                  </span>
                </div>
              </div>
              
              <!-- 分页 -->
              <div class="pagination">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="pageSize"
                  :current-page="currentPage"
                  @current-change="handlePageChange"
                />
              </div>
            </div>
          </div>
          
          <!-- 收藏功能暂未实现 -->
          
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 发送私信对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="发送私信"
      width="500px"
    >
      <el-form :model="messageForm" ref="messageFormRef" :rules="messageRules">
        <el-form-item prop="content" label="消息内容">
          <el-input
            type="textarea"
            v-model="messageForm.content"
            :rows="5"
            placeholder="请输入消息内容..."
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="sendingMessage" @click="sendMessage">发送</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import api from '@/api'
import config from '@/config'
import { Message, Calendar, View as ViewIcon, ChatDotRound, Star, User, CollectionTag } from '@element-plus/icons-vue'

export default {
  name: 'UserProfile',
  components: {
    Message,
    Calendar,
    ViewIcon,
    ChatDotRound,
    Star,
    User,
    CollectionTag
  },
  setup() {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const loading = ref(true)
    const contentLoading = ref(true)
    const user = ref({})
    const activeTab = ref('articles')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const articles = ref([])
    const comments = ref([])
    // 收藏功能暂未实现
    // const favorites = ref([])
    const defaultAvatar = require('@/assets/default-avatar.png')
    const dialogVisible = ref(false)
    const messageForm = ref({})
    const messageRules = ref({
      content: [{ required: true, message: '请输入消息内容', trigger: 'blur' }]
    })
    const sendingMessage = ref(false)
    
    // 头像URL处理函数
    const getAvatarUrl = (url) => {
      console.log('UserProfile原始头像URL:', url);
      const result = config.getAvatarUrl(url);
      console.log('UserProfile处理后头像URL:', result);
      return result;
    }
    
    // 获取路由中的用户ID
    const userId = computed(() => {
      try {
        // 如果路径是/user/profile，表示访问当前用户的个人中心
        if (route.path === '/user/profile') {
          const currentUserId = store.getters['user/userId'];
          console.log('当前用户个人中心，使用store中的用户ID:', currentUserId);
          
          // 检查是否登录和是否有用户ID
          if (!store.getters['user/isLoggedIn']) {
            console.warn('用户未登录，无法获取用户ID');
            return null;
          }
          
          if (currentUserId === undefined || currentUserId === null) {
            console.warn('用户已登录但ID不存在');
            return null;
          }
          
          // 确保返回有效的ID，如果ID不存在，返回null
          return currentUserId;
        }
        
        // 否则从路由参数中获取ID
        const id = route.params.id;
        console.log('从路由参数获取用户ID:', id);
        
        // 确保用户ID是数字
        if (id === undefined || id === null || id === '') {
          console.warn('路由参数中的用户ID为空');
          return null;
        }
        
        const parsedId = parseInt(id);
        if (isNaN(parsedId)) {
          console.warn('路由参数中的用户ID无法转为数字:', id);
          return null;
        }
        
        console.log('解析后的用户ID:', parsedId);
        return parsedId;
      } catch (error) {
        console.error('获取用户ID时发生错误:', error);
        return null;
      }
    })
    
    // 判断是否是当前登录用户
    const isCurrentUser = computed(() => {
      try {
        const currentUserId = store.getters['user/userId'];
        console.log('判断是否是当前用户 - 当前登录ID:', currentUserId, '页面用户ID:', userId.value);
        
        // 检查用户是否登录
        if (!store.getters['user/isLoggedIn']) {
          return false;
        }
        
        // 检查两个ID是否有效
        if (currentUserId === null || currentUserId === undefined) {
          return false;
        }
        
        if (userId.value === null || userId.value === undefined) {
          return false;
        }
        
        // 检查是否匹配
        return currentUserId === userId.value;
      } catch (error) {
        console.error('判断当前用户时出错:', error);
        return false;
      }
    })
    
    // 日期格式化
    const formatDate = (date) => {
      if (!date) return '未知日期';
      
      const now = moment();
      const postDate = moment(date);
      const diff = now.diff(postDate, 'days');
      
      if (diff < 1) {
        // 不到一天显示"今天"或具体小时
        const hourDiff = now.diff(postDate, 'hours');
        if (hourDiff < 1) {
          const minuteDiff = now.diff(postDate, 'minutes');
          return minuteDiff <= 0 ? '刚刚' : `${minuteDiff}分钟前`;
        }
        return `${hourDiff}小时前`;
      } else if (diff < 7) {
        // 不到一周显示"X天前"
        return `${diff}天前`;
      } else {
        // 超过一周显示具体日期
        return postDate.format('YYYY-MM-DD');
      }
    }
    
    // 处理文章标签
    const getTags = (tags) => {
      if (!tags) return [];
      
      // 如果已经是数组，直接返回
      if (Array.isArray(tags)) return tags;
      
      // 如果是字符串，按逗号分割
      if (typeof tags === 'string') {
        // 为空白字符串时直接返回空数组
        if (!tags.trim()) return [];
        
        // 去除空白标签，处理标签中的空格
        return tags.split(',')
          .map(tag => tag.trim())
          .filter(tag => tag && tag.length > 0);
      }
      
      return [];
    }
    
    // 加载用户信息
    const loadUserInfo = async () => {
      console.log('开始加载用户信息，当前userId:', userId.value);
      
      // 如果userId不是有效的数字，则不进行请求
      if (userId.value === null || userId.value === undefined) {
        console.error('无效的用户ID，无法加载用户信息');
        ElMessage.error('无效的用户ID');
        router.push('/');
        return;
      }
      
      loading.value = true;
      try {
        let response;
        // 判断是否为当前登录用户
        const currentUserId = store.getters['user/userId'];
        console.log('当前登录用户ID:', currentUserId, '请求的用户ID:', userId.value);
        
        const isCurrentUserProfile = store.getters['user/isLoggedIn'] && 
          (route.path === '/user/profile' || (currentUserId && currentUserId === userId.value));
        
        console.log('是否是当前用户个人中心:', isCurrentUserProfile);
        
        if (isCurrentUserProfile) {
          // 如果是当前登录用户，不传ID参数，从Session获取
          console.log('当前用户个人中心，不传ID参数');
          response = await api.user.getInfo(null);
        } else {
          // 如果是查看其他用户，传递用户ID
          console.log('查看其他用户个人中心，传递ID参数:', userId.value);
          response = await api.user.getInfo(userId.value);
        }
        
        
        if (response && response.code === 0) {
          user.value = response.data || {};
          console.log('用户信息获取成功:', user.value);
        } else {
          console.error('加载用户信息失败:', response);
          ElMessage.error(response?.message || '加载用户信息失败');
        }
      } catch (error) {
        console.error('加载用户信息出错:', error);
        ElMessage.error('加载用户信息失败: ' + (error.message || '未知错误'));
      } finally {
        loading.value = false;
      }
    }
    
    // 加载用户发布的文章
    const loadUserArticles = async () => {
      console.log('加载用户发布的文章，userId:', userId.value);
      
      // 如果userId不是有效的数字，则不进行请求
      if (userId.value === null || userId.value === undefined) {
        console.warn('无效的用户ID，不加载文章列表');
        articles.value = [];
        total.value = 0;
        contentLoading.value = false;
        return;
      }
      
      contentLoading.value = true;
      try {
        // 使用userId参数请求文章列表，并添加分页参数
        const params = {
          userId: userId.value,
          page: currentPage.value,
          size: pageSize.value
        };
        console.log('请求用户文章列表参数:', params);
        
        const response = await api.article.getUserArticles(params);
        console.log('用户文章列表响应:', response);
        
        if (response && response.code === 0) {
          articles.value = response.data || [];
          // 调试：打印每篇文章的标签信息
          articles.value.forEach(article => {
            console.log(`文章ID: ${article.id}, 标题: ${article.title}, 标签: ${article.tags || '无'}`);
          });
          total.value = response.total || 0;
        } else {
          console.error('加载文章列表失败:', response);
          articles.value = [];
          total.value = 0;
          ElMessage.error(response?.message || '加载文章列表失败');
        }
      } catch (error) {
        console.error('加载文章列表出错:', error);
        articles.value = [];
        total.value = 0;
        ElMessage.error('加载文章列表失败: ' + (error.message || '未知错误'));
      } finally {
        contentLoading.value = false;
      }
    }
    
    // 加载用户发表的评论
    const loadUserComments = async () => {
      console.log('加载用户发表的评论，userId:', userId.value);
      
      // 如果userId不是有效的数字，则不进行请求
      if (userId.value === null || userId.value === undefined) {
        console.warn('无效的用户ID，不加载评论列表');
        comments.value = [];
        total.value = 0;
        contentLoading.value = false;
        return;
      }
      
      contentLoading.value = true;
      try {
        // 构建请求参数
        const params = {
          userId: userId.value,
          page: currentPage.value,
          size: pageSize.value
        };
        console.log('请求评论列表参数:', params);
        
        // 使用API服务
        const response = await api.comment.getUserComments(params);
        console.log('用户评论列表响应:', response);
        
        if (response && response.code === 0) {
          comments.value = response.data?.items || [];
          total.value = response.data?.total || 0;
        } else {
          console.error('加载评论列表失败:', response);
          comments.value = [];
          total.value = 0;
          ElMessage.error(response?.message || '加载评论列表失败');
        }
      } catch (error) {
        console.error('加载评论列表出错:', error);
        comments.value = [];
        total.value = 0;
        ElMessage.error('加载评论列表失败: ' + (error.message || '未知错误'));
      } finally {
        contentLoading.value = false;
      }
    }
    
    // 收藏功能暂未实现
    
    // 根据当前标签页加载数据
    const loadTabData = () => {
      console.log('加载标签页数据，当前标签:', activeTab.value);
      
      try {
        currentPage.value = 1;
        
        if (userId.value === null || userId.value === undefined) {
          console.warn('无效的用户ID，不加载标签页数据');
          return;
        }
        
        switch (activeTab.value) {
          case 'articles':
            loadUserArticles();
            break;
          case 'comments':
            loadUserComments();
            break;
          default:
            console.warn('未知的标签页:', activeTab.value);
            break;
        }
      } catch (error) {
        console.error('加载标签页数据出错:', error);
        ElMessage.error('加载数据失败，请刷新页面重试');
      }
    }
    
    // 处理标签页切换
    const handleTabClick = (tab) => {
      // 保存当前选项卡
      activeTab.value = tab.props.name;
      
      // 确保我们不会因标签名而尝试使用非数字的用户ID
      currentPage.value = 1;
      
      // 仅加载当前选定的数据
      switch (tab.props.name) {
        case 'articles':
          loadUserArticles();
          break;
        case 'comments':
          loadUserComments();
          break;
      }
    }
    
    // 处理分页
    const handlePageChange = (page) => {
      currentPage.value = page
      
      switch (activeTab.value) {
        case 'articles':
          loadUserArticles()
          break
        case 'comments':
          loadUserComments()
          break
      }
    }
    
    // 显示发送私信对话框
    const showSendMessageDialog = () => {
      dialogVisible.value = true;
    }
    
    // 发送私信
    const sendMessage = async () => {
      try {
        // 检查是否是给自己发消息
        const currentUserId = store.getters['user/userId'];
        console.log('检查发送私信: 当前用户ID:', currentUserId, '接收者ID:', userId.value);
        
        if (currentUserId === userId.value) {
          ElMessage.warning('不能给自己发送私信');
          return;
        }
        
        // 验证表单
        if (!messageForm.value.content || !messageForm.value.content.trim()) {
          ElMessage.warning('请输入消息内容');
          return;
        }
        
        sendingMessage.value = true;
        const response = await api.message.sendMessage({
          userId: userId.value,
          content: messageForm.value.content
        });
        if (response && response.code === 0) {
          ElMessage.success('私信发送成功');
          dialogVisible.value = false;
          messageForm.value = {};
        } else {
          ElMessage.error(response?.message || '发送私信失败');
        }
      } catch (error) {
        ElMessage.error('发送私信失败: ' + (error.message || '未知错误'));
      } finally {
        sendingMessage.value = false;
      }
    }
    
    // 监听路由参数变化
    watch(
      () => route.fullPath,
      () => {
        console.log('路由变化，当前路径:', route.fullPath);
        
        try {
          // 如果是/user/profile路径，直接加载当前用户数据
          if (route.path === '/user/profile') {
            console.log('用户个人中心路径，加载当前用户数据');
            
            // 检查用户是否已登录
            if (!store.getters['user/isLoggedIn']) {
              console.warn('用户未登录，重定向到登录页面');
              ElMessage.warning('请先登录');
              router.push('/login');
              return;
            }
            
            // 检查store中是否有用户ID
            const userIdFromStore = store.getters['user/userId'];
            console.log('从store获取的用户ID:', userIdFromStore);
            
            if (!userIdFromStore) {
              console.warn('用户ID不存在，尝试重新获取用户信息');
              
              // 尝试重新获取用户信息
              store.dispatch('user/getInfo')
                .then(() => {
                  // 重新检查用户ID是否存在
                  const newUserId = store.getters['user/userId'];
                  if (newUserId) {
                    console.log('成功获取用户ID:', newUserId);
                    loadUserInfo();
                    loadTabData();
                  } else {
                    console.error('无法获取有效的用户ID，重定向到登录页面');
                    ElMessage.error('无法获取用户信息，请重新登录');
                    router.push('/login');
                  }
                })
                .catch(err => {
                  console.error('获取用户信息失败', err);
                  ElMessage.error('获取用户信息失败，请重新登录');
                  router.push('/login');
                });
              return;
            }
            
            loadUserInfo();
            loadTabData();
            return;
          }
          
          // 如果是带ID的路径，检查ID是否有效
          const id = parseInt(route.params.id);
          if (!isNaN(id)) {
            // 有效的用户ID，加载数据
            loadUserInfo();
            loadTabData();
          } else {
            // 无效的用户ID，重定向到首页
            console.error('无效的用户ID:', route.params.id);
            ElMessage.error('无效的用户ID');
            router.push('/');
          }
        } catch (error) {
          console.error('路由参数变化处理出错:', error);
          ElMessage.error('出现错误，请刷新页面重试');
        }
      }
    );
    
    // 监听路由参数变化
    router.beforeEach((to, from, next) => {
      if (to.name === 'UserProfile' && to.params.tab) {
        // 根据路由参数更新activeTab
        const tabName = to.params.tab;
        // 只允许有效的标签页
        if (['articles', 'comments'].includes(tabName)) {
          activeTab.value = tabName;
        } else {
          // 默认显示文章标签页
          activeTab.value = 'articles';
        }
      }
      next();
    });
    
    // 初始化
    onMounted(() => {
      console.log('组件挂载，当前路径:', route.fullPath);
      
      try {
        // 如果是/user/profile路径，直接加载当前用户数据
        if (route.path === '/user/profile') {
          console.log('用户个人中心路径，加载当前用户数据');
          
          // 检查用户是否已登录
          if (!store.getters['user/isLoggedIn']) {
            console.warn('用户未登录，重定向到登录页面');
            ElMessage.warning('请先登录');
            router.push('/login');
            return;
          }
          
          // 检查store中是否有用户ID
          const userIdFromStore = store.getters['user/userId'];
          console.log('从store获取的用户ID:', userIdFromStore);
          
          if (!userIdFromStore) {
            console.warn('用户ID不存在，尝试重新获取用户信息');
            
            // 尝试重新获取用户信息
            store.dispatch('user/getInfo')
              .then(() => {
                // 重新检查用户ID是否存在
                const newUserId = store.getters['user/userId'];
                if (newUserId) {
                  console.log('成功获取用户ID:', newUserId);
                  loadUserInfo();
                  loadTabData();
                } else {
                  console.error('无法获取有效的用户ID，重定向到登录页面');
                  ElMessage.error('无法获取用户信息，请重新登录');
                  router.push('/login');
                }
              })
              .catch(err => {
                console.error('获取用户信息失败', err);
                ElMessage.error('获取用户信息失败，请重新登录');
                router.push('/login');
              });
            return;
          }
          
          loadUserInfo();
          loadTabData();
          return;
        }
        
        // 如果是带ID的路径，检查ID是否有效
        const id = parseInt(route.params.id);
        if (!isNaN(id)) {
          // 有效的用户ID，加载数据
          loadUserInfo();
          loadTabData();
        } else {
          // 无效的用户ID，重定向到首页
          console.error('无效的用户ID:', route.params.id);
          ElMessage.error('无效的用户ID');
          router.push('/');
        }
      } catch (error) {
        console.error('组件挂载处理出错:', error);
        ElMessage.error('出现错误，请刷新页面重试');
      }
    })
    
    return {
      loading,
      contentLoading,
      user,
      activeTab,
      articles,
      comments,
      currentPage,
      pageSize,
      total,
      isCurrentUser,
      defaultAvatar,
      formatDate,
      handleTabClick,
      handlePageChange,
      dialogVisible,
      messageForm,
      messageRules,
      sendingMessage,
      showSendMessageDialog,
      sendMessage,
      getAvatarUrl,
      getTags
    }
  }
}
</script>

<style scoped>
.profile-container {
  padding: 20px 15px;
}

.profile-card, .article-card {
  margin-bottom: 20px;
}

.user-info {
  text-align: center;
}

.avatar-container {
  margin-bottom: 20px;
}

.username {
  margin: 15px 0 5px;
  font-size: 20px;
  color: #303133;
}

.user-id {
  margin: 0;
  font-size: 14px;
  color: #909399;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
  padding: 10px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-item strong {
  font-size: 18px;
  color: #303133;
}

.stat-item span {
  font-size: 12px;
  color: #909399;
}

.user-meta {
  text-align: left;
  margin: 20px 0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-item .el-icon {
  margin-right: 8px;
  color: #909399;
}

.actions {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-item, .comment-item {
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.3s;
}

.article-item:hover {
  background-color: #f9fafc;
}

.article-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
  text-decoration: none;
  transition: color 0.3s;
}

.article-title:hover {
  color: #409EFF;
}

.article-summary {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-tags {
  margin: 8px 0 12px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #f8f9fa;
  padding: 6px 10px;
  border-radius: 4px;
}

.tags-label {
  margin-right: 8px;
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 13px;
  font-weight: 500;
}

.tags-label .el-icon {
  margin-right: 4px;
  color: #67c23a;
}

.article-tag {
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 12px;
  border-radius: 4px;
}

.article-meta, .comment-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #909399;
  align-items: center;
}

.comment-content {
  margin-bottom: 10px;
  font-size: 14px;
  color: #303133;
}

.article-link a {
  color: #409EFF;
  text-decoration: none;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.empty-list {
  padding: 40px 0;
}

.article-item:last-child, .comment-item:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .article-meta, .comment-footer {
    flex-direction: column;
    gap: 8px;
  }
}
</style>